<template>
	<view class="category-nav-wrapper">
		<view class="header">
			<scroll-view class="category-nav" scroll-x="true" show-scrollbar="false" :scroll-left="scrollLeft"
				scroll-with-animation="true" @scroll="onNavScroll">
				<view class="nav-container">
					<view class="nav-item" v-for="(item, index) in categories" :key="index"
						:class="{ active: modelValue === index }" @click="switchCategory(index)">
						<text class="nav-text">{{ item.name }}</text>
					</view>
					<view class="nav-indicator" :style="{ 
						transform: `translateX(${indicatorPosition}px)`,
						width: `${indicatorWidth}px`
					}"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, getCurrentInstance } from 'vue'
import { useLoadList } from "../common/data"

// Props
const props = defineProps({
	model: {
		type: String,
		required: true
	},
	modelValue: {
		type: Number,
		default: 0
	},
	filters: {
		type: Object,
		default: () => ({})
	}
})

// Emits
const emit = defineEmits(['update:modelValue', 'change'])

// 响应式数据
const scrollLeft = ref(0)
const indicatorPosition = ref(0)
const indicatorWidth = ref(30)

// 获取分类数据
const { listData: categories } = useLoadList(props.model, props.filters)

// 重新设计位置计算
const updateIndicator = (index) => {
	nextTick(() => {
		const query = uni.createSelectorQuery()
		query.selectAll('.nav-item').boundingClientRect()
		query.select('.nav-container').boundingClientRect()
		
		query.exec((res) => {
			const items = res[0]
			const container = res[1]
			
			if (items && items[index] && container) {
				const targetItem = items[index]
				
				// 计算相对于容器的位置
				const itemLeft = targetItem.left - container.left
				const itemWidth = targetItem.width
				
				// 指示器宽度设为固定值
				indicatorWidth.value = 30
				
				// 指示器居中对齐到目标项
				const indicatorLeft = itemLeft + (itemWidth - indicatorWidth.value) / 2
				indicatorPosition.value = indicatorLeft
				
				console.log(`指示器位置: ${indicatorLeft}, 项目宽度: ${itemWidth}, 项目左边: ${itemLeft}`)
			}
		})
	})
}

// 监听modelValue变化
watch(() => props.modelValue, (newVal) => {
	updateIndicator(newVal)
}, { immediate: true })

// 监听categories变化
watch(categories, () => {
	if (categories.value && categories.value.length > 0) {
		setTimeout(() => {
			updateIndicator(props.modelValue)
		}, 200) // 给DOM一点时间渲染
	}
})

// 切换分类
const switchCategory = (index) => {
	updateIndicator(index)
	emit('update:modelValue', index)
	emit('change', index, categories.value[index])
}

// 导航滚动事件
const onNavScroll = (e) => {
	scrollLeft.value = e.detail.scrollLeft
}

// 初始化
onMounted(() => {
	updateIndicator(props.modelValue)
})

// 暴露给父组件的数据和方法
defineExpose({
	categories,
	updateIndicator
})
</script>

<style scoped>
.category-nav-wrapper {
	width: 100%;
}

/* 顶部分类导航 */
.header {
	background: #f8f9fa;
	position: sticky;
	top: 0;
	z-index: 100;
	height: 56px;
	width: 100%;
	border-bottom: 1px solid #e9ecef;
}

.category-nav {
	height: 100%;
	background: white;
}

.category-nav::-webkit-scrollbar {
	display: none;
}

.nav-container {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	position: relative;
}

.nav-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 16px;
	margin-right: 16px;
	position: relative;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nav-item:hover .nav-text {
	color: #1890ff;
}

.nav-item.active .nav-text {
	color: #1890ff;
	font-weight: 600;
}

.nav-text {
	font-size: 15px;
	color: #333;
	font-weight: 400;
	transition: all 0.3s ease;
	line-height: 1;
}

.nav-indicator {
	position: absolute;
	bottom: 8px;
	left: 0;
	height: 3px;
	background: #1890ff;
	border-radius: 2px;
	/* 暂时去掉动画 */
}
</style> 